<template>
  <el-button plain @click="dialogTableVisible = true" type="success">添加</el-button>
  <el-table :data="tableData" style="width: 100%;padding-top: 10px;" border>
    <el-table-column prop="" type="index" label="编号" width="60" />
    <el-table-column prop="userName" label="用户姓名" width="100" />
     <el-table-column prop="roleName" label="角色" width="100" />
    <el-table-column prop="sex" label="性别" width="100">
      <template #default="scope">
        <el-inpu v-if="scope.row.sex == 1">男</el-inpu>
        <el-inpu v-if="scope.row.sex == 2">女</el-inpu>
      </template>
    </el-table-column>
    <el-table-column prop="procinceName" label="所在省" width="100" />
    <el-table-column prop="cityName" label="所在市" width="100" />
    <el-table-column prop="regionName" label="所在县" width="100" />
    <el-table-column prop="assdr" label="地址详情" width="100">
      <template #default="scope">
        <el-tooltip :content="scope.row.assdr">
          <span>{{ scope.row.assdr.substr(0, 5) }}......</span>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column prop="crearName" label="创建人" width="100" />
    <el-table-column prop="crearTime" label="创建时间" width="100">
      <template #default="scope">
        <span>{{ moment(scope.row.crearTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="updateName" label="修改人" width="100" />
    <el-table-column prop="updateTime" label="修改时间" width="100">

      <template #default="scope">
        <span v-if="scope.row.updateTime == null"></span>
        <span v-else>{{ moment(scope.row.updateTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作列" min-width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="open(scope.row.id)">删除</el-button>
        <el-button link type="primary" size="small" @click="Edit(scope.row)">修改</el-button>
        
        <!-- <el-button link type="primary" size="small" @click="Edit(scope.row)">修改</el-button> -->
      </template>
    </el-table-column>
  </el-table>

  <!-- 添加 -->
  <el-dialog v-model="dialogTableVisible" title="添加" width="800">
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
      <el-form-item label="用户名：" prop="userName">
        <el-input v-model="ruleForm.userName" />
      </el-form-item>

      <el-form-item label="性别：" prop="sex">
        <el-radio-group v-model="ruleForm.sex">
          <el-radio :value="1">男</el-radio>
          <el-radio :value="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="所在省份" prop="province">

        <el-col :span="8">
          <el-select v-model="ruleForm.province" placeholder="请输入所在省份" @change="getShengId">
            <el-option v-for="s in shengData" :label="s.procinceName" :value="s.id" />
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-select v-model="ruleForm.city" placeholder="请输入所在市份" @change="getShiId">
            <el-option v-for="s in shiData" :label="s.cityName" :value="s.id" />
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-select v-model="ruleForm.regionId" placeholder="请输入所在县份">
            <el-option v-for="s in xianData" :label="s.regionName" :value="s.id" />
          </el-select>
        </el-col>
      </el-form-item>

      <el-form-item label="详细地址：" prop="assdr">
        <el-input v-model="ruleForm.assdr" />
        <!-- <el-input v-model="ruleForm.assdr" style="width: 240px" maxlength="140" placeholder="请输入详细地址" show-word-limit
          type="text" /> -->
      </el-form-item>
      

      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          保存
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!-- 修改 -->
  <el-dialog v-model="dialogTableVisible1" title="添加" width="800" >
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
      <el-form-item label="用户名：" prop="userName">
        <el-input v-model="ruleForm.userName" />
      </el-form-item>

      <el-form-item label="性别：" prop="sex">
        <el-radio-group v-model="ruleForm.sex">
          <el-radio :value="1">男</el-radio>
          <el-radio :value="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="所在省份" prop="province">
        <el-col :span="8">
          <el-select v-model="ruleForm.province" placeholder="请输入所在省份" @change="getShengId">
            <el-option v-for="s in shengData" :label="s.procinceName" :value="s.id" />
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-select v-model="ruleForm.city" placeholder="请输入所在市份" @change="getShiId">
            <el-option v-for="c in shiData" :label="c.cityName" :value="c.id" />
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-select v-model="ruleForm.regionId" placeholder="请输入所在县份">
            <el-option v-for="x in xianData" :label="x.regionName" :value="x.id" />
          </el-select>
        </el-col>
      </el-form-item>

      <el-form-item label="详细地址：" prop="assdr">
        <el-input v-model="ruleForm.assdr" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm1()">
          保存
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <!-- 分页 -->
  <!-- <table>
    <tbody>
      <tr>
        <td>
          <el-pagination v-model:current-page="page.index" v-model:page-size="page.size"
            :page-sizes="[15, 20, 25, 30]" :background="true"
            layout="slot, sizes" :total="page.totalCount" prev-text="上一页" next-text="下一页">
            共{{ page.totalCount }}条 第{{ page.index }}/{{ page.totalPcount }}页
          </el-pagination>
        </td>
        
        <td>
          <el-pagination v-model:current-page="page.index" v-model:page-size="page.size"
            :page-sizes="[15, 20, 25, 30]" :background="true"
            layout="slot, prev, pager, next" :total="page.totalCount" prev-text="上一页" next-text="下一页">
          </el-pagination>
        </td>

        <td>
          <el-pagination v-model:current-page="page.index" v-model:page-size="page.size"
            :page-sizes="[15, 20, 25, 30]" :background="true"
            layout="slot, jumper" :total="page.totalCount" prev-text="上一页" next-text="下一页">
          </el-pagination>
        </td>
      </tr>
    </tbody>
  </table> -->
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import axios from "axios";
import moment from "moment";
import https from "../../http/AxiosHelper";

const handleClick = () => {
  console.log("click");
};
//显示
const tableData = ref([]);
const page = ref({
  index: 1,
  size: 100,

});
const getData = () => {
  https.get("api/User/ShowUser",{params:page.value}).then((res) => {
    tableData.value = res.data.data;
    // page.value.totalCount = res.data.totalCount
    // page.value.totalPcount = Math.ceil((res.data.totalCount * 1.0) / page.value.size)
  });
};
onMounted(() => {
  getData();
  GetSheng();
});
// //分页
// watch(page.value,()=>{
//   getData();
// })
//删除
import { ElMessage, ElMessageBox } from "element-plus";
const open = (id: any) => {
  ElMessageBox.confirm("确定删除吗?", {
    confirmButtonText: "确实",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      https
        .get("api/User/DelUser?Id=" + id)
        .then((res) => {
          if (res.data.code == 200) {
            ElMessage.success(res.data.msg);
            getData();
          } else {
            ElMessage.error(res.data.msg);
          }
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "删除被取消",
      });
    });
};
//弹框
const dialogTableVisible = ref(false);
const dialogTableVisible1 = ref(false);
//添加
import { reactive } from "vue";
import type { FormInstance, FormRules } from "element-plus";


const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  "id": "",
  "userName": "",
  "sex": 0,
  "province": '',
  "city": '',
  "regionId": '',
  "assdr": ""
});

const locationOptions = ["Home", "Company", "School"];

const rules = reactive({
  userName: [
    { required: true, message: "用户名称不能为空", trigger: "blur" },
  ],
  assdr: [
    {
      required: true,
      message: "详情地址不能为空",
      trigger: "change",
    },
  ],

});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      https.post("api/User/AddUser", ruleForm).then(res => {
        if (res.data.code == 200) {
          ElMessage.success(res.data.msg)
          dialogTableVisible.value = false
          ruleForm.assdr = '';
          ruleForm.city = '';
          ruleForm.province = '';
          ruleForm.regionId = '';
          ruleForm.sex = 0;
          ruleForm.userName = '';
          getData();
        }
        else {
          ElMessage.error(res.data.msg)
        }
      })
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
const shengData: any = ref([]);
const GetSheng = () => {
  https.get("api/User/ShowProvince").then(res => {
    shengData.value = res.data.data
  })
}
const shiData: any = ref([]);
const Getshi = (id: any) => {
  https.get("api/User/ShowCity", { params: { ProvinceId: id } }).then(res => {
    shiData.value = res.data.data
  })
}
const xianData: any = ref([]);
const Getxian = (id: any) => {
  https.get("api/User/ShowRegion", { params: { CityId: id } }).then(res => {
    xianData.value = res.data.data
  })
}
const getShengId = (id: any) => {
  if (id) {
    Getshi(id)
  }
  ruleForm.city = "";
  ruleForm.regionId = "";

}
const getShiId = (id: any) => {
  if (id) {
    Getxian(id);
  }
  ruleForm.regionId = "";
}

// 修改
const Edit = async (row: any) => {

  dialogTableVisible1.value = true;
  ruleForm.id = row.id;
  ruleForm.assdr = row.assdr;
  ruleForm.province = row.provinceId;
  ruleForm.city = row.cityName;
  
  ruleForm.regionId = row.regionName;
  ruleForm.sex = row.sex;
  ruleForm.userName = row.userName;
  // Object.assign(ruleForm,row);
  await GetSheng();
  await Getshi(row.province);
  await Getxian(row.city);
}
const submitForm1 = async () => {
  https.post("api/User/UpdateUser", ruleForm).then(res => {
    if (res.data.code == 200) {
      ElMessage.success(res.data.msg);
      dialogTableVisible1.value = false;
      getData();
    }
    else {
      ElMessage.error(res.data.msg)
    }
  })
};
</script>
<style>
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(120px);
  opacity: 0;
}
</style>